<template>
  <article>
    <section @click="actives()">
      <van-icon name="wap-nav" :class="show?'deg':''" size="1rem"/>
    </section>
    <div :class="!show?'beforeMenu':'afterMenu'">
      <ul class="listMenu" v-for="item in dropMenus" :key="item.label">
        <li>{{item.name}}<van-icon class="nextIcon" name="arrow" size=".5rem"/></li>
      </ul>
    </div>
  </article>
</template>
<script>
import {mapMutations, mapState} from 'vuex'
export default {
  data() {
    return {
      show:false,
      dropMenus: [
        {name:'第一个',label:1},
        {name:'第二个',label:2},
        {name:'第三个',label:3},
        {name:'第四个',label:4},
        {name:'第五个',label:5},
        {name:'第六个',label:6}
      ]
    }
  },
  computed:{},
  watch: {},
  mounted() {
            //点击其他区域关闭下拉菜单
          document.addEventListener('click', (e) => {
              if (!this.$el.contains(e.target)) 
               this.show = false
            })
        },
  methods:{
    actives() {
      this.show = !this.show  
    }
  }
};
</script>
<style lang="less" scoped>
.nextIcon {
      position: absolute;
      right: 1.5rem;
}
.deg {
  transform:rotate(90deg);
}
section{
  width: 100%;
  height: 13vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor:pointer;
}
.beforeMenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  .listMenu {
  width: 100%;
  height: 0;
  li {
    width: 100%;
    height: 0;
    font-size: .5rem;
    opacity: 0;
  }
}
}
.afterMenu {
  position: absolute;
  top: 13vw;
  left: 0;
  width: 100%;
  height: 1999%;
  background:#f8f8f8;
  z-index: -9;
  .listMenu {
    display: flex;
    align-items: center;
    padding: .3rem 1rem;
   
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10vw;
    line-height: 10vw;
    font-size: .5rem;
    border: 0.05rem solid rgb(80, 80, 80);
    border-radius: .3rem;
    // box-shadow: 10px 10px 5px #888888;
    opacity: 1;
    transition: all 0.35s;
    &:hover {
    border: 0.05rem solid rgb(1, 81, 255);
    border-radius: .3rem;
    box-shadow: 0 0 0;
    }
   
  }
}
}

</style>